<template>
  <div>
    <div class="top"><img :src="info.mechanism.head_sculpture ? info.mechanism.head_sculpture : avatar" alt="" width="90" height="90"></div>
    <div class="content">
      <van-cell-group>
        <van-cell title="机构名称" :value="info.mechanism.name"/>
        <van-field label="手机号" :value="info.phoneStr" disabled type="textarea" autosize rows="1" input-align="right"/>
        <van-cell title="教师人数" :value="info.teacher"/>
        <van-cell title="学生人数" :value="info.student"/>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import api from '@/api'
export default {
  name: 'about',
  data () {
    return {
      avatar: require('@/assets/img/icon-avatar.png'),
      info: {
        mechanism: {
          id: 1,
          name: '',
          head_sculpture: ''
        },
        phoneStr: '',
        teacher: 0,
        student: 0
      }
    }
  },
  methods: {
    getInfo () {
      api.platformAgencyDetail({
        params: {id: this.$route.query.id},
        callback: res => {
          if (res.data.error_code === 0) {
            Object.keys(this.info).forEach(key => {
              this.info[key] = res.data.data[key]
            })
            let phone = []
            res.data.data.phone.forEach(item => {
              phone.push(item.phone)
            })
            this.info.phoneStr = phone.join('/')
          }
        }
      })
    }
  },
  created () {
    this.getInfo()
  }
}
</script>

<style scoped>
  .top{
    padding: 10px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .top img{
    border-radius: 50%;
    overflow: hidden;
  }
  .content{
    border-top: 10px solid #f2f2f2;
  }
  .van-cell div:nth-child(2) span{
    color: #2D2D2D;
  }
</style>
